<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Audio+Video Recording using MediaRecorder ® Muaz Khan</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
        <link rel="author" type="text/html" href="https://plus.google.com/100325991024054712503">
        <meta name="author" content="Muaz Khan">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <link href="https://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet" type="text/css" />
        <style>
            html { background: #eee; }

            body {
                font-family: "Inconsolata", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", monospace;
                font-size: 1.2em;
                line-height: 1.2em;
                margin: 0;
            }

            body {
                background: #fff;
                border: 1px solid;
                border-color: #ddd #aaa #aaa #ddd;
                border-radius: 5px;
                margin: .5em auto 0 auto;
                padding: .8em;
                padding-top: 0;
            }

            h1, h2, h3 {
                border-bottom: 1px solid black;
                display: inline;
                font-weight: normal;
                line-height: 36px;
                padding: 0 0 3px 0;
            }

            h1 {
                background: rgb(238, 238, 238);
                border-bottom-width: 2px;
                display: block;
                margin-top: 0;
                padding: .3em;
                text-align: center;
            }

            h3 {
                display: block;
                font-size: 1.3em;
            }

            :-moz-any-link:focus {
                border: 0;
                color: #000;
            }

            ::selection { background: #ccc; }

            ::-moz-selection { background: #ccc; }

            footer { text-align: center; }

            code {
                color: rgb(204, 14, 14);
                font-family: inherit;
            }

            pre {
                border-left: 2px solid red;
                margin-left: 2em;
                padding-left: 1em;
            }

            a {
                color: #2844FA;
                text-decoration: none;
            }

            a:hover, a:focus { color: #1B29A4; }

            a:active { color: #000; }

            :-moz-any-link:focus {
                border: 0;
                color: #000;
            }

            ::selection { background: #ccc; }

            ::-moz-selection { background: #ccc; }
        </style>
        <script src="https://www.webrtc-experiment.com/AudioVideoRecorder.js"> </script>
    </head>
    <body>
        <h1>
            Audio+Video Recording using <a href="https://wiki.mozilla.org/Gecko:MediaRecorder"
                                           target="_blank">MediaRecorder</a> / <a href="https://github.com/muaz-khan/WebRTC-Experiment/tree/master/AudioVideoRecorder"
                                                                                  target="_blank">Source Code</a>
        </h1>
        <p>
            Copyright © 2013 <a href="https://github.com/muaz-khan" target="_blank">Muaz Khan</a>&lt;<a
                                                                                                         href="http://twitter.com/muazkh" target="_blank">@muazkh</a>&gt;.</p>
        <section class="plusone-gplus">
            <div class="g-plusone" data-href="https://www.webrtc-experiment.com/"></div>
        </section>
        <div id="audios-container">
        </div>
        <script>
            var mediaConstraints = { audio: true };
            navigator.mozGetUserMedia(mediaConstraints, onMediaSuccess, onMediaError);

            function onMediaSuccess(stream) {
                // https://www.webrtc-experiment.com/AudioVideoRecorder.js
                AudioVideoRecorder({
                    stream: stream,
                    mimeType: 'audio/ogg',
                    interval: 5000,
                    onRecordedMedia: function(blob) {
                        var a = document.createElement('a');
                        a.target = '_blank';
                        a.innerHTML = 'Open Recorded Audio No. ' + (index++);

                        a.href = URL.createObjectURL(blob);

                        audiosContainer.appendChild(a);
                        audiosContainer.appendChild(document.createElement('hr'));
                    }
                });
            }

            function onMediaError(e) {
                console.error('media error', e);
            }

            var audiosContainer = document.getElementById('audios-container');
            var index = 1;
        </script>
        <h3>
            Support: Firefox Nightly / <a href="http://nightly.mozilla.org/" target="_blank">Download</a></h3>
        <h3>
            <strong style="color: red;">Limitation</strong>: Only audio-recording is available
            (<span style="color: rgb(187, 192, 213);">...audio+video recording coming soon</span>)</h3>
        <pre>
&lt;script src="https://www.webrtc-experiment.com/AudioVideoRecorder.js"&gt;&lt;/script&gt;

AudioVideoRecorder({

    // MediaStream object
    stream: MediaStream,

    // mime-type of the output blob
    mimeType: 'audio/ogg',

    // set time-interval to get the blob
    interval: 5000,

    // get access to the recorded blob
    onRecordedMedia: function (blob) {
        // POST/PUT blob using FormData/XMLHttpRequest

        // or set download URL
        hyperlink.href = URL.createObjectURL(blob);
    }

});
</pre>
        <br />
        <br />
        <section style="border: 1px solid rgb(189, 189, 189); border-radius: .2em; margin: 1em 3em;">
            <h2 id="feedback" style="border-bottom: 1px solid rgb(189, 189, 189); padding: .2em .4em;">Feedback</h2>

            <div>
                <textarea id="message" style="border: 1px solid rgb(189, 189, 189); height: 8em; margin: .2em; outline: none; resize: vertical; width: 98%;" placeholder="Have any message? Suggestions or something went wrong?"></textarea>
            </div>
            <button id="send-message" style="font-size: 1em;">Send Message</button>
        </section>
        <footer>
            <p> <a href="https://www.webrtc-experiment.com/" target="_blank">WebRTC Experiments!</a> © <a href="https://plus.google.com/100325991024054712503" rel="author" target="_blank">Muaz Khan</a>, <span> 2013 </span> » <a href="mailto:muazkh@gmail.com" target="_blank">Email</a>»
                <a
                    href="http://twitter.com/muazkh" target="_blank">@muazkh</a>» <a href="https://github.com/muaz-khan" target="_blank">Github</a>

            </p>
        </footer>
		
        <!-- common.js is useless for you! -->
        <script src="https://www.webrtc-experiment.com/common.js"> </script>
    </body>
</html>
